<template>
  <div class="hello">
    <span>{{ msg }}</span>
    <button @click="changeMsg">传值</button>
    <!-- <h1>son</h1>
    {{ msg }}
    <button @click="handleChange">子组件btn</button>
    <ul>
      <slot v-for="(item, index) in arr" :key="item" :item="`子组件_${item}`" :index="index"></slot>
      <li v-for="item in arr" :key="item">子组件-{{ item }}</li>
    </ul>
    <div>

      子组件number
      <span>
        {{ number }}
      </span>
      inject{{ name }}
    </div> -->
  </div>
</template>

<script>
// import { ref } from 'vue';

// import myMixin from '@/mixin/myMixin';

export default {
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  // inject: ['name'],
  // mixins: [myMixin],
  // data() {
  //   return {
  //     myTitle: '子组件title',
  //     arr: [
  //       1, 2, 3, 4
  //     ]
  //   }
  // },
  // methods: {
  //   handleChange() {
  //     this.$emit('changeTitle', this.myTitle)
  //   }
  // },
  setup(props, { emit }) {
    console.log(props)
    // const msg1 = ref(props.msg)
    // console.log(msg1, 'msg')
    const changeMsg = () => {
      // this
      emit('changeMsg', '234')
    }
    return {
      msg1: props.msg,
      changeMsg
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
